
<div class="container">
    <link type="text/css" ng-href="{{page.Css}}" rel="stylesheet" />
    <div class="inner-container sample">
        <h2 id="working-sample">Novel Info</h2>

        <div style="text-align:right;">
            数据库中共找到小说{{info.novelCount}}本&nbsp;&nbsp;&nbsp;&nbsp;
            <button type="button" ng-disabled="PreClickShow" class="btn btn-default" ng-click="PrePageData()">上一页</button>
            第{{info.nowpage+1}}页/共{{info.allpage}}页
            <button type="button" ng-disabled="NextClickShow" class="btn btn-default" ng-click="NextPageData()">下一页</button>
            
        </div>
        <div style="margin-top: 10px;">
            <select class="form-control" style="width: 20%;display: inline-block;" ng-init="search.selectedSearchType = search.searchType[0]" ng-model="search.selectedSearchType" ng-options="x.name for x in search.searchType"></select>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <select class="form-control" style="width: 50%;display: inline-block;" ng-show="search.showType" ng-model="search.key" ng-options="x for x in search.novelType"></select>
            <input style="width: 60%;display: inline-block;" ng-hide="search.showType" type="text" class="form-control" ng-model="search.key">

            &nbsp;&nbsp;&nbsp;&nbsp;
            <button type="button" class="btn btn-default" ng-click="Open()">New Novel!</button>
            <!-- <div ng-show="selected">Selection from a modal: {{ selected }}</div> -->
        </div>
        <div ng-show="progress.Ready">
        <table class="table table-hover table-bordered" bs-table>
            <thead>
                <tr>
                    <th ng-click="predicate='Index'; reverse=!reverse">Index</th>
                    <th ng-click="predicate='NovelName'; reverse=!reverse">Novel Name</th>
                    <th ng-click="predicate='Author'; reverse=!reverse">Author</th>
                    <th ng-click="predicate='Url'; reverse=!reverse">Url</th>
                    <th ng-click="predicate='NewChapter'; reverse=!reverse">New Chapter</th>
                    <!--<th ng-click="predicate='ChapterUrl'; reverse=!reverse">Chapter Url</th>-->
                    <th ng-click="predicate='NovelType'; reverse=!reverse">Novel Type</th>
                    <th ng-click="predicate='Status'; reverse=!reverse">Status</th>
                    <th class="action-column">Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="contact in contactList | orderBy:predicate:reverse">
                    <td>{{$index + 1}}</td>
                    <td>{{contact.novelname}}</td>
                    <td>{{contact.author}}</td>
                    <td>{{contact.url |removal }}</td>
                    <td>{{contact.newchp}}</td>
                    <!--<td>{{contact.newurl}}</td>-->
                    <td>{{contact.noveltype }}</td>
                    <td>{{contact.status}}</td>
                    <td>
                    	<button type="button" class="btn btn-info btn-sm" ng-click="Show(contact)">Show</button>
                    	<button type="button" class="btn btn-info btn-sm" ng-click="Edit(contact)">Edit</button>
                    	<button type="button" class="btn btn-danger btn-sm" ng-click="Remove(contact)">Remove</button>
                    </td>
                </tr>
            </tbody>
        </table>
        </div>
    </div>

    <div ng-hide="progress.Ready" class="inner-container preloader">
        <p>Please wait. Novel table is loading...</p>
        <div class="progress progress-striped active">
            <div class="progress-bar" style="width: 100%"></div>
        </div>
    </div>

    <div>
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">{{$ctrl.title}}</h3>
        </div>
        <div class="modal-body" id="modal-body">
            <div style="width:33%;float:left">
            <img src="{{$ctrl.contact.imagesaddr}}" height="240" width="180" alt="{{$ctrl.contact.novelname}}" />
            <br/><br/>
            </div>
            <div style="width:67%;float:right">
                Novel ID:<input type="text" id="novel-info" class="form-control" readonly ng-model="$ctrl.contact.id">
                Novel Name:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-model="$ctrl.contact.novelname">
                Author:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-model="$ctrl.contact.author">
                Novel Url:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-model="$ctrl.contact.url">
                Latest Chapter:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-model="$ctrl.contact.newchp">
                <br/>
            </div>
                Latest Chapter Url:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-model="$ctrl.contact.newurl">
                Novel Type:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-model="$ctrl.contact.noveltype">
                Novel Status:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-model="$ctrl.contact.status">

            Novel Image Url:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-model="$ctrl.contact.imagesaddr">
            Novel Desc:
            <textarea id="novel-info" cols ="50" rows = "5" class="form-control" ng-model="$ctrl.contact.desc" ng-readonly="{{$ctrl.readonly}}" style="resize: none;"></textarea>
<!--             Test:
<ul>
    <li ng-repeat="item in $ctrl.items">
        <a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item">{{ item }}</a>
    </li>
</ul>
Selected: <b>{{ $ctrl.selected.item }}</b> -->
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
        </div>
    </script>

    </div>  
 
    <div class="form-group">
            <label class="control-label">Select theme:</label>
            <select class="form-control" style="width: 15%;display: inline-block;" ng-model="page.Css">
                <option ng-repeat="theme in page.Themes" ng-selected="theme.cssMin == page.Css" value="{{theme.cssMin}}">{{theme.name}}</option>
            </select>
    </div>
</div>
